<script setup lang="jsx">
import { computed, reactive, ref } from 'vue';
import { Button, Input, Select } from 'ant-design-vue';
import dayjs from 'dayjs';
import CommonSearch from '@/components/common/common-search.vue';
import Modal from '@/components/common/modal.vue';

import {
  addingtoolData, // 添加刀具
  queryalltools, // 查询所有刀具
  newtoolInformation, // 新增刀具信息
  modifiedtoolData, // 修改刀具信息
  erasetoolData, // 删除刀具
  toolRelationship, // 查询所有刀具库匹配关系
  addtoolRelationship, // 添加刀具库位匹配关系
  queryinputInformation, // 查询实际录入信息
  toolinformationEdit, // 修改刀具信息
  toolinformationDelete // 删除刀具信息
} from '@/service/api/modules/cut/v-cut';
import { useAuthStore } from '@/store/modules/auth';

const commonSearchRef = ref(null);
const searchParams = ref({
  time: null
});

const authStore = useAuthStore();

// 刀组选择
const knifeN = ref([
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B' },
  { label: 'C', value: 'C' },
  { label: 'D', value: 'D' },
  { label: 'E', value: 'E' },
  { label: 'F', value: 'F' }
]);

// 外层搜索+内层搜索
const searchFormList = [
  // {
  //   type: 'input',
  //   key: 'moduleNo',
  //   label: '生产型号',
  //   placeholder: '请输入生产型号',
  //   span: 24,
  //   md: 12,
  //   lg: 8,
  //   xl: 8,
  //   xxl: 6
  // },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '时间',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  console.log(searchParams.value);

  if (searchParams.value.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD ');
    params.endTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});
const pagination1 = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination1.current = current;
    pagination1.pageSize = size;
    getData3();
  }
});
// 查询刀具库分页
const pagination2 = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['20', '50', '100', '200', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination2.current = current;
    pagination2.pageSize = size;
    getData5();
  }
});
// 主页面展示
const columns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 100,
    align: 'center',
    checked: true
  },
  {
    key: 'useDate',
    dataIndex: 'useDate',
    title: '使用日期',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'knifeLib',
    dataIndex: 'knifeLib',
    title: '刀具库',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'useDateLength',
    dataIndex: 'useDateLength',
    title: '今日行程',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'useDateTotalLength',
    dataIndex: 'useDateTotalLength',
    title: '累计行程',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'grind',
    dataIndex: 'grind',
    title: '研磨',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'operator',
    dataIndex: 'operator',
    title: '记录人',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'foreman',
    dataIndex: 'foreman',
    title: '领班审核',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'examiner',
    dataIndex: 'examiner',
    title: '主管审核',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'foremanTime',
    dataIndex: 'foremanTime',
    title: '领班审核时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'examinerTime',
    dataIndex: 'examinerTime',
    title: '主管审核时间',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '审核状态',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return ['待领班审核', '待修改', '待主管审核', '审核完毕'][record.state];
    }
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  }
  // {
  //   key: 'delFlag',
  //   dataIndex: 'delFlag',
  //   title: '删除状态',
  //   width: 100,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   customRender: ({ record }) => {
  //     return ['未删', '已删'][record.state];
  //   }
  // }
]);
// 查询刀具库列表展示
const knifeList = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'knifeLib',
    dataIndex: 'knifeLib',
    title: '绑定刀组',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Select
          style="width: 100%"
          value={record.knifeLib}
          options={knifeN.value}
          onChange={val => {
            record.knifeLib = val;
          }}
        ></Select>
      );
    }
  },
  {
    key: 'knifeNum1',
    dataIndex: 'knifeNum1',
    title: '刀具上编号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeNum1}
          onChange={e => {
            record.knifeNum1 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'knifeNum2',
    dataIndex: 'knifeNum2',
    title: '刀具下编号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeNum2}
          onChange={e => {
            record.knifeNum2 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'knifeDiameter1',
    dataIndex: 'knifeDiameter1',
    title: '刀具直径1',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeDiameter1}
          onChange={e => {
            record.knifeDiameter1 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'knifeDiameter2',
    dataIndex: 'knifeDiameter2',
    title: '刀具直径2',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeDiameter2}
          onChange={e => {
            record.knifeDiameter2 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'useTotalLength',
    dataIndex: 'useTotalLength',
    title: '累计长度',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'cz',
    dataIndex: 'cz',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130,
    fixed: 'right',
    customRender: ({ record }) => {
      return (
        <div>
          <Button type="primary" ghost size="small" class="m-r8px" onClick={() => editKnife(record)}>
            修改
          </Button>
          <Button danger ghost size="small" class="m-r8px" onClick={() => deleteKnife(record)}>
            删除
          </Button>
        </div>
      );
    }
  }
]);
// 新增
const knifeInfo = ref([
  {
    key: 'knifeLib',
    dataIndex: 'knifeLib',
    title: '刀组',
    width: 50,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'knifes',
    dataIndex: 'knifes',
    title: '刀具上编号',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.knifes?.knifeNum1;
    }
  },
  {
    key: 'knifeNum2',
    dataIndex: 'knifeNum2',
    title: '刀具下编号',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.knifes?.knifeNum2;
    }
  },
  {
    key: 'knifeDiameter1',
    dataIndex: 'knifeDiameter1',
    title: '刀具直径1',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.knifes?.knifeDiameter1;
    }
  },
  {
    key: 'knifeDiameter2',
    dataIndex: 'knifeDiameter2',
    title: '刀具直径2',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.knifes?.knifeDiameter2;
    }
  },
  {
    key: 'useDateLength',
    dataIndex: 'useDateLength',
    title: '今日行程',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.disabled) {
        return <div style="min-width:150px">{record.useDateLength}</div>;
      }
      return (
        <Input
          style="height: 22px !important;"
          value={record.useDateLength}
          onBlur={e => {
            const value = e.target.value;
            if (!(isNonNegativeInteger(Number(value).toString()) && Number(value >= 0))) {
              message.error('请输入正整数');
              record.useDateLength = null;
              return;
            }
            record.useDateLength = Number(value);
          }}
        ></Input>
      );
    }
  },
  {
    key: 'useTotalLength',
    dataIndex: 'useTotalLength',
    title: '累计行程',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.knifes?.useTotalLength;
    }
  },
  {
    key: 'grind',
    dataIndex: 'grind',
    title: '研磨',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record.grind) {
        return <div style="min-width:150px">{record.grind}</div>;
      }
      return (
        <Input
          style="height: 22px !important;"
          value={record.grind}
          onBlur={e => {
            const value = e.target.value;
            if (!(isNonNegativeInteger(Number(value).toString()) && Number(value >= 0))) {
              message.error('请输入正整数');
              record.grind = null;
              return;
            }
            record.grind = Number(value);
          }}
        ></Input>
      );
    }
  }
]);

const formState = ref({
  operator: authStore.userInfo.user.nickName || authStore.userInfo.user.userName
});
const formStat = ref({});
const formStata = ref({});
const formStatt = ref({});
const detailsVisibleQrcode = ref(false);
const detailsVisibleQrcod = ref(false);
const detailsVisibleQrcod3 = ref(false);
const detailsVisibleQrcod4 = ref(false);

const tableData = ref([]);
const knifeData = ref([]);
const tData = ref([
  {
    badName: 'A',
    result: '',
    problem: ''
  },
  {
    badName: 'B',
    result: '',
    problem: ''
  },
  {
    badName: 'C',
    result: '',
    problem: ''
  },
  {
    badName: 'D',
    result: '',
    problem: ''
  },
  {
    badName: 'E',
    result: '',
    problem: ''
  },
  {
    badName: 'F',
    result: '',
    problem: ''
  }
]);
const loading = ref(false);

const defaultExpandedRowKeys = ref([]);

// 刀具编号下拉选择数据
// const options = ref([]);
// function basicmodelarealists() {
//   basicmodelarealist().then(({ error, data }) => {
//     if (!error) {
//       options.value = data;
//     }
//   });
// }
// basicmodelarealists();

// 获取页面表格数据
function getData() {
  loading.value = true;
  console.log('searchData', searchData.value);
  queryinputInformation({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchData.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
        });
        tableData.value = data.list;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

// 获取刀具信息数据
function getData5() {
  loading.value = true;
  console.log('searchData', searchData.value);

  toolRelationship({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchData.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.index = index + 1;
        });

        knifeData.value = data;
        console.log(knifeData.value, 'knifeData.value ');

        pagination2.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const tableDataKnife = ref([]);
// 获取刀具库数据
function getData3() {
  loading.value = true;

  queryalltools({
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    ...searchData.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
        });
        tableDataKnife.value = data.list;
        pagination1.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const formTit = ref('');
const formTite = ref('');
const formTool = ref('');
// 点击新增
function manualSyncing() {
  formState.value = {
    operator: authStore.userInfo.nickName || authStore.userInfo.user.userName
  };
  detailsVisibleQrcode.value = true;
  formTite.value = 'V-CUT刀具记录新增';
}
function addKadd(val) {
  formState.value.knifeData = knifeData.value;
  if (val == 'V-CUT刀具记录新增') {
    newtoolInformation(formState.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('新增成功');
        detailsVisibleQrcode.value = false;
        getData();
      }
    });
  } else {
    toolinformationEdit(formState.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('修改成功');
        detailsVisibleQrcode.value = false;
        getData();
      }
    });
  }
}
// 点击修改
const selectedRowKeys = ref([]);
function tableSelectChange(val) {
  selectedRowKeys.value = val;
}
function updateSyncing() {
  if (selectedRowKeys.value.length !== 1) {
    return window.$message?.error('请选择一条数据');
  }
  const selectData = tableData.value.filter(item => selectedRowKeys.value.includes(item.id));
  formTite.value = 'V-CUT刀具记录信息修改';
  formState.value = selectData[0];
  detailsVisibleQrcode.value = true;
}
// 点击删除
function deleteSyncing() {
  if (selectedRowKeys.value.length == 0) {
    return window.$message?.error('请选择数据');
  }
  const deleteData = selectedRowKeys.value;
  toolinformationDelete(deleteData).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('删除成功');
      getData();
    }
  });
}
getData();

// 点击新增刀具库manualTool
function manualTool() {
  formStat.value = {};
  formTit.value = 'V-CUT刀具库新增';
  detailsVisibleQrcod.value = true;
}
// 点击查询刀具库searchTool
function searchTool() {
  formStata.value = {};
  formTool.value = 'V-CUT刀具库查询';
  getData3();
  detailsVisibleQrcod3.value = true;
}

// 点击新增刀具库
function boundUpdat(val) {
  console.log(val, '111');
  if (val == 'V-CUT刀具库新增') {
    addingtoolData(formStat.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('新增成功');
        detailsVisibleQrcod.value = false;
        // getData();
      }
    });
  } else {
    edfactoryequipmentdataupdate(formStat.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('修改成功');
        detailsVisibleQrcod.value = false;
        // getData();
      }
    });
  }
}

// // 刀组库点击修改
function editKnife(val) {
  modifiedtoolData(val).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('修改成功');
      getData3();
    }
  });
}
getData3();
// 点击删除刀组库
function deleteKnife(val) {
  erasetoolData(val).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('删除成功');
      getData3();
    }
  });
}
getData3();
// boundT
// function boundT(){

// }
function search() {
  pagination.current = 1;
  getData();
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      keywords: null
    };
    search();
  });
}
</script>

<template>
  <div
    class="jl-main-page printed-code h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="manualSyncing">
          <span class="ml-3px">新增</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="updateSyncing">
          <span class="ml-3px">修改</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="deleteSyncing">
          <span class="ml-3px">删除</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="manualTool">
          <span class="ml-3px">新增刀具库</span>
        </AButton>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="searchTool">
          <span class="ml-3px">查询刀具库</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <!-- 表格数据 -->
      <ATable
        :columns="columns"
        :data-source="tableData"
        size="small"
        bordered
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: tableSelectChange }"
        :default-expanded-row-keys="defaultExpandedRowKeys"
        row-key="id"
        :default-expand-all-rows="true"
        :scroll="{ x: '1200', y: 'auto' }"
        :pagination="pagination"
        class="h-full"
      />
      <!-- 新增刀具表格 -->
      <Modal
        v-model:visible="detailsVisibleQrcode"
        :destroy-on-close="true"
        :centered="true"
        :title="formTite"
        width="1200px"
        height="600px"
      >
        <!-- 刀组选择 -->
        <div>
          <ATabs>
            <ATabPane key="1" tab="基本信息"></ATabPane>
          </ATabs>
        </div>
        <div>
          <ATable
            :columns="knifeInfo"
            :pagination="false"
            :data-source="knifeData"
            :loading="loading"
            size="small"
            bordered
            :default-expanded-row-keys="defaultExpandedRowKeys"
            row-key="id"
            :default-expand-all-rows="true"
            :scroll="{ x: 'auto', y: 'auto' }"
            class="h-full"
          />
        </div>
        <!-- 状态信息 -->
        <div>
          <ATabs>
            <ATabPane key="1" tab="状态信息"></ATabPane>
          </ATabs>
        </div>
        <div>
          <div class="event-form">
            <AForm :model="formState" name="basic" :label-col="{ span: 6 }" autocomplete="off">
              <ARow>
                <ACol :span="8">
                  <AFormItem label="记录人" name="operator">
                    <AInput v-model:value="formState.operator" allow-clear disabled="false" />
                  </AFormItem>
                </ACol>
                <ACol :span="8">
                  <AFormItem label="领班审核" name="foreman">
                    <AInput v-model:value="formState.foreman" allow-clear disabled="true" />
                  </AFormItem>
                </ACol>
                <ACol :span="8">
                  <AFormItem label="主管审核" name="examiner">
                    <AInput v-model:value="formState.examiner" allow-clear disabled="true" />
                  </AFormItem>
                </ACol>
              </ARow>
            </AForm>
          </div>
        </div>
        <!-- 保存和关闭 -->
        <template #footer>
          <div class="modal-footer">
            <AButton @click="detailsVisibleQrcode = false">关闭</AButton>
            <AButton @click="addKadd">保存</AButton>
          </div>
        </template>
      </Modal>
      <!-- 新增刀具库 -->
      <Modal
        v-model:visible="detailsVisibleQrcod"
        :destroy-on-close="true"
        :centered="true"
        :title="formTit"
        width="850px"
        height="500px"
      >
        <!-- 刀具编号 -->
        <div>
          <ATabs>
            <ATabPane key="1" tab="刀具组信息"></ATabPane>
          </ATabs>
        </div>
        <!-- 刀具编号详细 -->
        <div class="event-form">
          <AForm :model="formStat" name="basic" :label-col="{ span: 6 }" autocomplete="off">
            <ARow>
              <ACol :span="12">
                <AFormItem label="刀具编号(上)" name="knifeNum1" :rules="[{ required: true, message: '请输入编号!' }]">
                  <AInput v-model:value="formStat.knifeNum1" allow-clear show-search="">
                    <ASelectOption v-for="item in optionsName" :key="item.label" :value="item.label">
                      {{ item.label }}
                    </ASelectOption>
                  </AInput>
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem label="刀具编号(下)" name="knifeNum2" :rules="[{ required: true, message: '请输入编号!' }]">
                  <AInput v-model:value="formStat.knifeNum2" allow-clear show-search="">
                    <ASelectOption v-for="item in optionsName" :key="item.label" :value="item.label">
                      {{ item.label }}e
                    </ASelectOption>
                  </AInput>
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem label="直径1" name="knifeDiameter1" :rules="[{ required: true, message: '请输入直径!' }]">
                  <AInput v-model:value="formStat.knifeDiameter1" allow-clear show-search="">
                    <ASelectOption v-for="item in optionsName" :key="item.label" :value="item.label">
                      {{ item.label }}
                    </ASelectOption>
                  </AInput>
                </AFormItem>
              </ACol>
              <ACol :span="12">
                <AFormItem label="直径2" name="knifeDiameter2" :rules="[{ required: true, message: '请输入直径!' }]">
                  <AInput v-model:value="formStat.knifeDiameter2" allow-clear show-search="">
                    <ASelectOption v-for="item in optionsName" :key="item.label" :value="item.label">
                      {{ item.label }}
                    </ASelectOption>
                  </AInput>
                </AFormItem>
              </ACol>
            </ARow>
          </AForm>
        </div>
        <!-- 保存和关闭 -->
        <template #footer>
          <div class="modal-footer">
            <AButton @click="detailsVisibleQrcod = false">关闭</AButton>
            <AButton @click="boundUpdat(formTit)">保存</AButton>
          </div>
        </template>
      </Modal>
      <!-- 查询刀具库 -->
      <Modal
        v-model:visible="detailsVisibleQrcod3"
        :destroy-on-close="true"
        :centered="true"
        :title="formTool"
        width="1200px"
        height="750px"
      >
        <CommonSearch
          ref="commonSearchRef"
          v-model:searchParams="searchParams"
          :form-list="searchFormList"
          :is-search="true"
          @search="search"
          @reset="reset"
        ></CommonSearch>
        <div class="event-form" style="height: 700px">
          <AForm :model="formStata" name="basic" :label-col="{ span: 6 }" autocomplete="off">
            <div class="event-form">
              <ATable
                :columns="knifeList"
                :data-source="tableDataKnife"
                size="small"
                :loading="loading"
                bordered
                :pagination="pagination2"
              ></ATable>
            </div>
          </AForm>
        </div>
        <!-- 保存和关闭 -->
        <template #footer>
          <div class="modal-footer">
            <AButton @click="detailsVisibleQrcod3 = false">关闭</AButton>
            <!-- <AButton @click="boundTool(formTool)">保存</AButton> -->
          </div>
        </template>
      </Modal>
    </ACard>
  </div>
</template>

<style lang="scss">
.si {
  border: 1px solid rgb(163, 163, 163);
  border-radius: 3px;
}
.wwedit {
  line-height: 40px;
  height: 40px;
  margin-left: 23px;
}
</style>
